<ng-container *ngIf="selection">
  <nav
    ngbNav
    #nav="ngbNav"
    (navChange)="softRefresh()"
    class="nav-tabs"
    cdStatefulTab="cephfs-tabs"
  >
    <ng-container ngbNavItem="details">
      <a
        ngbNavLink
        i18n>Details</a>
      <ng-template ngbNavContent>
        <cd-cephfs-detail [data]="details"> </cd-cephfs-detail>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="directories">
      <a ngbNavLink
         i18n>Directories</a>
      <ng-template ngbNavContent>
        <cd-cephfs-directories [id]="id"></cd-cephfs-directories>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="subvolumes">
      <a
      ngbNavLink
      i18n>Subvolumes</a>
      <ng-template ngbNavContent>
        <cd-cephfs-subvolume-list
          [fsName]="selection.mdsmap.fs_name"
          [pools]="details.pools"
          [id]="id"
        ></cd-cephfs-subvolume-list>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="subvolume-groups">
      <a
      ngbNavLink
      i18n>Subvolume groups</a>
      <ng-template ngbNavContent>
        <cd-cephfs-subvolume-group
        [fsName]="selection.mdsmap.fs_name"
        [pools]="details.pools">
        </cd-cephfs-subvolume-group>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="snapshots">
      <a
      ngbNavLink
      i18n>Snapshots</a>
      <ng-template ngbNavContent>
        <cd-cephfs-subvolume-snapshots-list [fsName]="selection.mdsmap.fs_name">
        </cd-cephfs-subvolume-snapshots-list>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="snapshot-schedules">
      <a
      ngbNavLink
      i18n>Snapshot schedules</a>
      <ng-template ngbNavContent>
        <cd-cephfs-snapshotschedule-list
          [fsName]="selection.mdsmap.fs_name"
          [id]="id"
        ></cd-cephfs-snapshotschedule-list>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="clients">
      <a ngbNavLink>
        <ng-container i18n>Clients</ng-container>
        <span class="badge badge-pill badge-tab ms-1">{{ clients.data.length }}</span>
      </a>
      <ng-template ngbNavContent>
        <cd-cephfs-clients
        [id]="id"
        [clients]="clients"
        (triggerApiUpdate)="refresh()">
        </cd-cephfs-clients>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="performance-details">
      <a
      ngbNavLink
      i18n>Performance Details</a>
      <ng-template ngbNavContent>
        <cd-grafana
          i18n-title
          title="CephFS MDS performance"
          [grafanaPath]="'mds-performance?var-mds_servers=mds.' + grafanaId"
          [type]="'metrics'"
          uid="tbO9LAiZz"
          grafanaStyle="one"
        >
        </cd-grafana>
      </ng-template>
    </ng-container>
  </nav>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
